<template>
  <div class="box">
    <!-- table -->
    <div class="page-list">
      <div class="list-top-box">
        <div class="tab-box">
          <el-tabs v-model="activeName" @tab-click="onSearch(1)">
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <el-tab-pane label="消息" name="2"></el-tab-pane>
            <el-tab-pane label="抄送" name="1"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list-top-box-right">
          <p class="list-top-box-left">
            已选<span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }}数据
          </p>
          <el-button type="danger" plain :disabled="multipleSelection.length == 0" @click="delFunc">删除</el-button>
        </div>
      </div>

      <div class="table-box" v-loading="tableLoading">
        <el-table ref="table" :header-cell-style="{
          background: '#FAFBFC',
          color: '#828A9D',
          textAlign: 'center',
        }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" height="100%" :data="tableData"
          highlight-selection-row border @selection-change="handleSelectionChange"
          @row-click="handleHighlightChangeTable">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="project_name" label="项目名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" @click.stop="goToDetail(scope.$index)">{{ scope.row.project_name }}</el-button>
            </template>
          </el-table-column>
          <el-table-column width="80" prop="project_name" label="头像" show-overflow-tooltip>
            <template slot-scope="scope">
              <img class="avatar-itme" :src="scope.row.send_user_image" />
            </template>
          </el-table-column>
          <el-table-column prop="send_user_name" label="操作人员" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="content" label="通知内容" show-overflow-tooltip>
          </el-table-column>
          <el-table-column width="100" prop="is_read" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag v-if="scope.row.is_read == 2" type="info">已读</el-tag>
              <el-tag v-if="scope.row.is_read == 1">未读</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="通知时间" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-footer">
        <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
          @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import sApi from "@/api/statisticsApi";

export default {
  name: "message",
  data() {
    return {
      tableLoading: false,//列表loading
      tableData: [],//列表数据
      formSearch: { keyword: '' },//搜索form
      moreSearchShow: false,//
      showOpne: false,//
      page: 1,
      num: 10,
      total: 0,
      multipleSelection: [],//多选数据
      activeName: '0',
    };
  },
  watch: {},
  computed: {
  },
  activated() { },
  destroyed() {
    window.onresize = null;
  },
  mounted() {
    this.$once("hook:beforeDestroy", function () {
      window.onresize = null;
    });
    this.onresize(); //监听搜索容器变化
    window.onresize = () => {
      this.onresize(); //监听搜索容器变化
    };

    this.getList();
  },
  methods: {
    // 单页数据量修改
    handleSizeChange(e) {
      this.num = e;
      this.onSearch(1);
    },
    // 搜索
    onSearch(page) {
      this.page = typeof page == 'number' ? page : this.page;
      this.getList();
    },
    // 翻页
    handleCurrentChange(page) {
      this.onSearch(page);
    },
    onresize() {
      let inter = "";
      clearTimeout(inter);
      inter = setTimeout(() => {
        if (!this.$refs.div) return;
        let height = this.$refs.div.$el.offsetHeight;
        height > 45 ? (this.showOpne = true) : (this.showOpne = false);
        this.moreSearchShow = false;
      }, 1000);
    },
    moreSearch() {
      this.moreSearchShow = !this.moreSearchShow;
    },
    addFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/system/role_add"
      })
    },
    editFunc() {
      let multipleSelection = this.multipleSelection;
      console.log(multipleSelection)
    },
    delFunc() {
      let multipleSelection = this.multipleSelection;
      let id_arr = multipleSelection.map(item => item.id)
      let name_arr = multipleSelection.map(item => item.name)
      this.$confirm('是否删除【' + name_arr.join(', ') + '】?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(id_arr)
      }).catch(() => { });

    },
    handleSelectionChange(e) {
      console.log(e);
      this.multipleSelection = e;
    },
    handleHighlightChangeTable(row) {
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
    },

    goToDetail(idx) {
      console.log(idx, 'sadzxcasd')
      let item = this.tableData[idx]
      // 修改未读为已读
      if (item.is_read == 1) {
        sApi.readMessage({
          message_id_arr: [item.id]
        }).then(res => {
          if (res.code == 200) {
            item.is_read = 2;
            this.$msgJump(item.mark, item)

            this.$parent.$parent.$children[1].msgNumMax -= 1
          }
        })
      } else {
        this.$msgJump(item.mark, item)
      }
    },

    // 获取列表数据
    getList() {
      this.tableLoading = true;
      sApi.getMessageList({
        page: this.page,
        num: this.num,
        carbon_copy: this.activeName,
      }).then((res) => {
        console.log(res, "获取列表");
        this.tableLoading = false;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.max;
        }
      }).catch((err) => {
        this.$message({
          message: err.message,
          type: "warning",
        });
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/listPage.scss';
</style>